<template>
    <div class="title">
        <div class="date">{{ nowDate }}</div>
        <div class="title_text">{{ text }}</div>
    </div>
</template>

<script setup name="title">
import { ref,onMounted,onUnmounted, onUpdated, defineProps } from 'vue';
const Props = defineProps({
    text:{
        type:String,
        default: 'aa'
    }
})
const nowDate = ref('')
const time = ref('')

const getDate = ()=>{
    const date = new Date
    let ymd = date.toLocaleDateString()
    let nowtime = date.getHours()+':'+(date.getMinutes()>=10?date.getMinutes():'0'+date.getMinutes())+':'+(date.getSeconds()>=10?date.getSeconds():'0'+date.getSeconds())
    nowDate.value = ymd+' '+ nowtime
}

onMounted(()=>{
    time.value = setInterval(() => {
        getDate()
    }, 1000);
    getDate()
})

onUpdated(()=>{
    clearInterval(time.value)
    time.value = ''
    time.value = setInterval(() => {
        getDate()
    }, 1000);
    getDate()
})

onUnmounted(()=>{
    clearInterval(time.value)
    time.value = ''
})
</script>

<style scoped>
.date{
    position: absolute;
    padding-top: 15px;
    right: 10px;
    height: 50px;
    line-height: 50px;
    text-shadow: 1px 1px 3px rgb(216, 216, 216);
    color: rgb(193, 198, 205);
    font-size: 16px;
}
.title_text{
    height: 50px;
    width: 100%;
    font-size: 24px;
    text-align: center;
    line-height: 50px;
    text-shadow: 1px 1px 3px rgb(216, 216, 216);
    color: rgb(193, 198, 205);
}
.title{
    background-image: url(../assets/title.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 50px;
    width: 100%;
    color: rgb(193, 198, 205);
}
</style>